<template>
  <div>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="人员类型" prop="personType">
        <a-radio-group v-model="form.personType"  :disabled="disabled">
          <a-radio value="1">
            社区戒毒
          </a-radio>
          <a-radio value="2">
            社区康复
          </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="社区康复/社区戒毒开始及结束时间" prop="orgCodes">
        <a-range-picker @change="pickerTime" :disabled="disabled" v-model="time">
          <template slot="dateRender" slot-scope="current">
            <div class="ant-calendar-date" >
              {{ current.date() }}
            </div>
          </template>
        </a-range-picker>
      </a-form-model-item>

      <a-form-model-item label="《社区康复/社区戒毒决定书》">
        <a-input
          :disabled="true"
        >
          <template slot="suffix">
            <a href="">预览</a><a-divider type="vertical"/><a href="">下载</a>
          </template>
        </a-input>
      </a-form-model-item>

      <a-form-model-item label="上传附件《社区康复/社区戒毒决定书》" prop="decisionId">
       <span style="position: relative">
            <j-upload
              :disabled="disabled"
              v-model="form.decisionId"
            />
            <span>仅支持扩展名为pdf 的文档</span>
            <span style="position: absolute; left: 124px; top: 0">
              <a-tooltip placement="topLeft" title="请将《社区戒毒/社区康复决定书》下载签字盖章后上传">
                <a-icon type="question-circle"/>
              </a-tooltip>
            </span>
          </span><br/>
      </a-form-model-item>

      <a-form-model-item label="《社区康复/社区戒毒决定书》编号" prop="decisionCaseNo">
        <a-input
          :disabled="disabled"
          v-model="form.decisionCaseNo"
          placeholder="请输入出所详细地址"
        />
      </a-form-model-item>

      <a-form-model-item label="《解除强制隔离戒毒证明书》">
        <a-input
          :disabled="true"
        >
          <template slot="suffix">
            <a href="">预览</a><a-divider type="vertical"/><a href="">下载</a>
          </template>
        </a-input>
      </a-form-model-item>

      <a-form-model-item label="上传附件《解除强制隔离戒毒证明书》" prop="certificateId">
        <span style="position: relative">
            <j-upload
              :disabled="disabled"
              v-model="form.certificateId"
            />
            <span>仅支持扩展名为pdf 的文档</span>
            <span style="position: absolute; left: 124px; top: 0">
              <a-tooltip placement="topLeft" title="请将《解除强制隔离戒毒证明书》下载签字盖章后上传">
                <a-icon type="question-circle"/>
              </a-tooltip>
            </span>
          </span><br/>
      </a-form-model-item>

      <a-form-model-item label="其他说明" prop="otherInstructions">
        <a-input v-model="form.otherInstructions" :disabled="disabled" type="textarea" placeholder="最多输入150字" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" v-if="buttonTF">
        <a-button @click="runtenFun">
          返回
        </a-button>
        <a-button style="margin-left: 10px;" type="primary" @click="onSubmit">
          确认通知
        </a-button>
        <a-button style="margin-left: 10px;" @click="localStorageFun">
          保存并退出
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
/*
通知
 */
import Vue from "vue";
import {USER_INFO} from "@/store/mutation-types";
import {
  notifyUnit,
  queryNoticePersonOffice,
  queryUnit,
  queryUploadMaterials,
  uploadMaterials
} from "@api/sjsk/receiveCase";

export default {
  name: "uploadTheFile",
  props:['current'],
  data(){
    return {
      form:{},
      time:[],
      disabled:false,
      labelCol: { span: 5 },
      wrapperCol: { span: 8 },
      rules:{
        personType:[{ required: true, message: '请选择人员类型', trigger: 'change' }],
        decisionId:[{ required: true, message: '请上传', trigger: 'blur' }],
        decisionCaseNo:[{ required: true, message: '请输入编号', trigger: 'blur' }],
        certificateId:[{ required: true, message: '请上传', trigger: 'blur' }],
        otherInstructions:[{ required: true, message: '请输入其他说明', trigger: 'blur' }],
      },
      orgCode:'',
      buttonTF:true
    }
  },
  created() {
    this.orgCode = Vue.ls.get(USER_INFO).orgCode
    console.log(this.orgCode)
  },
  mounted() {
    console.log(this.$route.query.currentStage)
    this.queryFun(this.$route.query.personId)
    this.buttonTF = this.current === 1
    this.disabled = !this.buttonTF
  },
  methods:{
    pickerTime(val1,val2){
      console.log(val1,val2)
      this.form.communityStartTime = val2[0]
      this.form.communityEndTime = val2[1]
    },
    queryFun(val){
      queryNoticePersonOffice({id:val}).then(ser => {
        if(ser.success && ser.result){
          this.form = ser.result.materialRingGiveUnt
          this.time.push(this.form.communityStartTime)
          this.time.push(this.form.communityEndTime)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    runtenFun(){
      this.$router.go (-1)
    },
    //提交
    onSubmit() {
      console.log(this.form)
      delete this.form.materialRingGiveUnt
      this.form = Object.assign(this.form,{id:this.$route.query.id},{personId:this.$route.query.personId})
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          uploadMaterials(this.form).then(ser => {
            if(ser.success){
              this.disabled = true
              this.buttonTF = false
              this.$emit('currentFu',2)
              // this.$route.query.currentStage = 1
              // this.$store.dispatch('currentStage',2)
              this.$message.success('通知成功')
            }
          })
        } else {
          this.$message.warn('请检查你的数据')
          return false;
        }
      });
    },
    //半永久存储
    localStorageFun() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          //本地永久存储
          localStorage.setItem('noticeeForm', JSON.stringify(this.form))
        } else {
          this.$message.warn('请检查你的数据')
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>